import React, { Component } from 'react';
import XiaojiejieItem from './Xiaojijieitem';
import './style.css'
import Boss from './Boss';
class Xiaojiejie extends Component {
	constructor(props) {
		super(props)
		this.state = {
			list: ['基础服务', '精油推背'],
			inputVal: '',
		}
	}

	// componentWillMount() {
	// 	console.log('组件将要挂在---------componentWillMount')
	// }
        //一般数据请求放在componentDidMount
	// componentDidMount() {
	// 	console.log('组件挂在完成-------componentDidMount')
	// }

    render () {
        // console.log('组件挂在中')
		let { inputVal, list } = this.state

		return (
			<div className="wrap">
				{/*   注释   */}
				<div>
					<label htmlFor="jsp">label</label>
					<input
						id="jsp"
						value={inputVal}
						onChange={this.inputChange.bind(this)}
					/>
					<button onClick={this.add.bind(this)}>增加</button>
				</div>
				{/* <li onClick={this.delItem.bind(this,i)} key={i}>{ e}</li>  */}
				<ul
					ref={(ul) => {
						this.ul = ul
					}}
				>
					{list.map((e, i) => (
						<XiaojiejieItem
							content={e}
							delItem={this.delItem}
							key={i + e}
							index={i}
						/>
					))}
                </ul>
                <Boss />
			</div>
		)
	}

	inputChange(e) {
		this.setState({
			inputVal: e.target.value,
		})
	}
	add() {
		let { inputVal, list } = this.state
		list.push(inputVal)
		this.setState(
			{
				list,
				inputVal: '',
			},
			() => {
			//	console.log(this.ul.querySelectorAll('div').length)
			}
		)
	}
	delItem = (i) => {
		let { list } = this.state
		list.splice(i, 1)
		this.setState({
			list,
		})
	}
}

export default Xiaojiejie;